<docs>
  ## 首页
</docs>
<template>
  <div class="body">
    <mheader type="index" @back_btn="goBack()" title="人事档案服务"></mheader>
    <!-- 申请须知 开始 -->
    <div class="li0"></div>
    <div class="list">
      <div class="content">
        <div class="c-li0"></div>
        <ul>
          <!-- <li class="icon_img1" @click="kj_enter">
            <p>开具证明服务</p>
          </li>
          <li class="icon_img3" @click="xx_enter">
            <p>信息变更服务</p>
          </li> -->
          <li class="icon_img2" @click="cd_enter">
            <p>存档信息查询</p>
          </li>

          <!-- <li class="icon_img4">
            <div class="icon_img4_bg">
            </div>
          </li> -->
        </ul>
      </div>
    </div>
    <!-- 申请按钮 开始 -->
    <div class="apply">
      <div class="info">
        <div class="info-cont1">
          <p class="info-cont1-name">姓名：{{grxx.xm}}</p>
        </div>
        <p class="info-cont2">身份证：{{grxx.sfzhm}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import Mheader from "@/txry/group/mheader/mheader";
import $ from "@/common/js/axios";

export default {
  components: { Mheader },
  name: "index",
  data() {
    return {
      visible: false,
      grxx: {
        sfzhm: "",
        xm: "",
        lxdh: "",
        xb:""
      },
    };
  },
  mounted(){

  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    GET_baseInfo(){
      this.$loading = true;
      $.get('/wszzfw/jcxxCx').then((res) => {
        this.$loading = false;
        const data = res.returnData;
        this.grxx = data;
      }).catch(() => {});
    },
    // 申请记录页面跳转
    sqList() {
      if (this.noticeText != "暂无申请记录") {
        this.$router.push({ name: "search" });
      }
    },
    kj_enter() {
      this.$router.push({ name: "reverseTwo" });
    },
    cd_enter() {
      this.$router.push({ name: "readKnow" });
    },
    xx_enter() {
      this.$router.push({ name: "change" });
    },
  },
  created() {
    this.GET_baseInfo();
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/variable.scss";

//竖屏  CSS
@media screen and (orientation: portrait) {
  .body {
    position: relative;
    height: 100vh;
    width: 100vw;
  }
  .apply {
    // position: absolute;
    width: 100%;
    bottom: 0;
  }
}
@media screen and (orientation: landscape) {
  //横CSS
}
// 申请须知
.list {
  height: 93%;
  background-color: #fff;
  box-sizing: border-box;
  ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: Center;
    flex-flow: wrap;
  }
  .title {
    display: flex;
    padding: 28px 48px;
    border-bottom: $border;
  }
  .title-h3 {
    font-size: $font-size-large;
    color: $color-text-title;
    flex: 1 1 auto;
    line-height: 80px;
  }
  .btn-round {
    font-size: $font-size-small;
    padding: 28px 36px;
  }
  .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 48px 48px 48px;
    line-height: 64px;
    .tip {
      color: #333;
      font-size: 54px;
      margin: 96px 0;
    }
    ul {
      margin-top: 40px;
      width: 100%;
    li {
      width: 100%;
      height: 180px;
      margin-bottom: 30px;
      border-bottom: 1px solid #dbdbdb;
      display: flex;
      align-items: center;
      position: relative;
      box-shadow: 0 0 20px #dbdbdb;
      border-radius: 8px;
      background-color: #fff !important;
      p {
        position: absolute;
        right: 50px;
        top: 50px;
        font-size: 63px;
        font-weight: 900;
        color: #2e7ef7;
      }
    }
    .icon_img1 {
      background: url("~imgs/01.png") 0 0 no-repeat;
      background-size: 275px 100%;

    }
    .icon_img2 {
      background: url("~imgs/02.png") 0 0 no-repeat;
      background-size: 275px 100%;

    }
    .icon_img3 {
      background: url("~imgs/03.png") 0 0 no-repeat;
      background-size: 275px 100%;

    }
    .icon_img4 {

      background: url("~imgs/04.png") 0 0 no-repeat;
      background-size: 275px 100%;
      .icon_img4_bg{
        height: 100%;
        width: 100%;
        opacity:0.5;
      // background-color: #d5e6ff !important;
      background: -moz-linear-gradient(left, #d5e6ff 0%, #ffffff 100%);
      background: -webkit-gradient(linear, left, right, color-stop(0%,#d5e6ff), color-stop(100%,#ffffff));
      background: -webkit-linear-gradient(left, #d5e6ff 0%,#ffffff 100%);
      background: -o-linear-gradient(left, #d5e6ff 0%,#ffffff 100%);
      background: -ms-linear-gradient(left, #d5e6ff 0%,#ffffff 100%);
      background: linear-gradient(to right, #d5e6ff 0%,#ffffff 100%);

      }
    }
    }
    .c-li0 {
      box-shadow: 0 0 20px #dbdbdb;
      border-radius: 8px;
      height: 481px;
      background: url("~imgs/index_bg.png") 0 0 no-repeat;
      background-size: $width-100 481px;
    }
  }
}
// 申请按钮
.apply {
  position: absolute;
  bottom: 0;
  width: $width-100;
  margin-top: $margin-base;
  line-height: 1.5;
  .info-cont1 {
    display: flex;
    line-height: 2;
    align-items: center;
    font-weight: 900;
  }
  .info-cont1-name {
    flex: 1 1 50%;
    font-size: 62px;
    color: $color-text-title;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  color: #2e7ef7;
  }
  .info-cont1-phone {
    flex: 1 0 65%;
    text-align: right;
    font-size: 62px;
  }
  .info-cont2 {
  font-weight: 900;
  color: #9e9e9e;
    font-size:62px;
    padding-bottom: 50px;
  }
  .info {
    width: 100%;
    border-right: 0;
    background-color: #fff;
    padding: $padding-base/2 48px;
  }
  .apply-btn {
    width: 33.3333333%;
    background-color: $color-base;
    text-align: center;
    color: #fff;
    height: 240px;
    font-size: $font-size-large;
    line-height: 240px;
  }
}
// messagebox
.material {
  line-height: 1.5;
  .m-title {
    color: $color-base;
    line-height: 2;
  }
  .m-content {
    color: $color-text-primary;
  }
}
</style>
